<template>
  <div>
    <el-dialog class="positionDialog" :title="this.ruleForm.id ? '修改' : '新增'" :visible="showDialog" width="98%"
      :before-close="handleClose" :modal="false" :close-on-click-modal="false">
      <div class="content">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
          <div class="title fir-title">
            <svg-icon class="svg-icon" icon-class="infoAdd" />
            <span>销售填报</span>
          </div>
          <div class="title">
            <span>客户信息</span>
          </div>
          <div class="form">
            <el-form-item label="订单号" prop="">
              <el-input v-model="ruleForm.orderNumber" placeholder="请输入订单号" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="客户姓名" prop="clientName">
              <el-select @change="client_nameChange" style="width: 100%;" v-model="ruleForm.clientName" filterable
                placeholder="请选择客户姓名或输入关键词">
                <el-option v-for="item, index in carList" :key="item.value + index" :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <el-button class="redAdd" @click="handleShowAddDialog('CustomerInfo')">新增</el-button>
            </el-form-item>
            <el-form-item label="地址" prop="clientAddress">
              <el-input v-model="ruleForm.clientAddress" placeholder="请输入地址" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="请输入手机号" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="农场" prop="farmCode">
              <el-select @change="farmCodeChange" style="width: 100%;" v-model="ruleForm.farmCode" filterable
                placeholder="请选择农场名称或输入关键词">
                <el-option v-for="item in farmCodeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="生产队" prop="teamCode">
              <el-select style="width: 100%;" v-model="ruleForm.teamCode" filterable placeholder="请选择生产队名称或输入关键词">
                <el-option v-for="item in teamCodeList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="form">
            <el-form-item class="widthLabel" label="各作物合同量(万斤)" prop="">
              <el-button class="addButton" type="primary" icon="el-icon-plus" size="mini" style="margin-right: 10px;"
                @click="handleShowAddDialog('handleTable')">新增</el-button>
              <el-popconfirm confirm-button-text='确定' @confirm="delTable" cancel-button-text='取消' icon="el-icon-info"
                icon-color="red" title="确定删除所勾选的数据吗？">
                <el-button slot="reference" type="danger" plain icon="el-icon-delete" size="mini">删除</el-button>
              </el-popconfirm>
            </el-form-item>
          </div>
        </el-form>
        <TableCom ref="tableCom" :tableHead="tableHead" :tableData="tableData" :tableOperate="tableOperate"
          :delList.sync="delList">
        </TableCom>
      </div>
      <div class="dialog-footer333">
        <el-button class="submit" @click="handleSubmit">确 认</el-button>
        <el-button class="back" @click="handleClose">返 回</el-button>
      </div>
    </el-dialog>
    <!-- 客户姓名 -->
    <CustomerInfo ref="CustomerInfo" :getKehuList="getKehuList" :showDialog.sync="customerInfo"></CustomerInfo>
    <!-- 新增车牌号 -->
    <CarInfo ref="CarInfo" :showDialog.sync="carInfo"></CarInfo>
    <!-- 司机信息 -->
    <DriverInfo ref="DriverInfo" :showDialog.sync="driverInfo"></DriverInfo>
    <HandlTable ref="handlTableAdd" :showDialog.sync="dialogVisible" :addTableDate='addTableDate'></HandlTable>
  </div>
</template>

<script>
import '../scss/style.scss'
import rules from '@/utils/rules'
import { getUserKey } from '@/utils/auth'
import { formatDate } from '@/utils/methods'
import { AddOrEditSaleList } from '@/api/table'
import { clientTableApi } from '@/api/info'
import { selectApi, carinfoApi, driverInfoApi } from '@/api/select'
import CustomerInfo from '@/views/info/components/CustomerInfo/dialog/AddPopu.vue'
import CarInfo from '@/views/info/components/CarInfo/dialog/AddPopu.vue'
import DriverInfo from '@/views/info/components/DriverInfo/dialog/AddPopu.vue'
import TableCom from '@/components/TableCom'
import HandlTable from './HandlTable.vue'
export default {
  props: ['showDialog'],
  components: {
    CarInfo,
    DriverInfo,
    CustomerInfo,
    TableCom,
    HandlTable
  },
  data() {
    return {
      ruleForm: {
        clientName: "",
        carName: '',
        carType: '',
        createUser: '',
        createTime: '',
        phone: "",
        farmCode: this.$farmCode || '',
        teamCode: this.$teamCode || ''
      },
      tableDateObj: {

      },
      rules: rules,
      carList: [],
      carInfo: false,
      driverInfo: false,
      customerInfo: false,
      dialogVisible: false,
      tableHead: [{
        title: '粮食种类',
        prop: 'cropType'
      }, {
        title: '合同量(万斤)',
        prop: 'contractNumber'
      }],
      tableData: [],
      tableOperate: [{
        title: '修改',
        handle: (row) => {
          this.$refs.handlTableAdd.handleGetSelect({ farmCode: this.ruleForm.farmCode, teamCode: this.ruleForm.teamCode })
          this.$refs.handlTableAdd.ruleForm = { ...row }
          this.dialogVisible = true
        },
        flag: (row) => {
          return true
        }
      }],
      delList: [],
      teamCodeList: [],
      farmCodeList: [],
      driverInfoLsit: [],
      carinfoList: []

    };
  },
  methods: {
    delTable() {
      this.tableData = this.tableData.filter((item) => {
        return !this.delList.includes(item.id)
      })
    },
    addTableDate(type, data) {
      if (type == 'add') {
        this.tableData.push({
          ...data,
          id: new Date().getTime(),

        })
      } else {
        const index = this.tableData.findIndex((item) => {
          return item.id == data.id
        })
        if (index != -1) {
          this.tableData = this.tableData.map((item, i) => {
            if (index == i) {
              return { ...data }
            } else {
              return item
            }

          })
        }
      }
    },
    farmCodeChange(e) {
      selectApi({ type: e }).then((res) => {
        this.teamCodeList = res.data.dictItemList
      })
      carinfoApi(e).then((res) => {
        this.carinfoList = res.data
      })
      driverInfoApi(e).then((res) => {
        this.driverInfoLsit = res.data
      })
    },
    client_nameChange(e) {
      const obj = this.carList.filter((item) => { return item.value == e })[0]
      this.ruleForm = {
        ...this.ruleForm,
        clientAddress: obj.address,
        phone: obj.phone
      }
    },
    getKehuList() {
      clientTableApi({ size: 1000, current: 1 }, {}).then(res => {
        this.carList = res.data.records.map((item) => {
          return {
            ...item,
            value: item.clientName,
            label: item.clientName
          }
        })
      })
      selectApi({ type: "farm_type" }).then((res) => {
        this.farmCodeList = res.data.dictItemList.filter((item) => {
          return item.value == this.$farmCode
        })
      })
      selectApi({ type: this.$farmCode }).then((res) => {
        this.teamCodeList = res.data.dictItemList
        // if(this.$teamCode!=''){
        //   this.teamCodeList = res.data.dictItemList.filter((item)=>{
        //   return item.value==this.$teamCode
        // })
        // }
      })
      carinfoApi(this.$farmCode).then((res) => {
        this.carinfoList = res.data
      })
      driverInfoApi(this.$farmCode).then((res) => {
        this.driverInfoLsit = res.data
      })

    },
    handleClose() {
      this.$emit('update:showDialog', false)
      this.ruleForm = {
        carName: '',
        carType: '',
        createUser: '',
        createTime: '',
      };
      this.tableData = []
      this.$refs.ruleForm.resetFields();
    },
    handleSubmit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.ruleForm.cropContracts = this.tableData.map((item) => {
            delete item.id
            return item;
          })
          AddOrEditSaleList(this.ruleForm).then((res) => {
            if (res.code == 0) {
              if (this.ruleForm.id) {
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
              } else {
                this.$message({
                  message: '添加成功',
                  type: 'success'
                })
              }
            }
            this.$emit('handleRefresh')
            this.handleClose()
          })

        } else {
          return false;
        }
      });
    },
    // 获取填报人时间
    handleGetInfo() {
      this.ruleForm.createUser = getUserKey() || 'nkjtcyf'
      this.ruleForm.createTime = formatDate(new Date())
    },
    // 新增弹框
    handleShowAddDialog(val) {
      if (val === 'CustomerInfo') {
        this.$refs.CustomerInfo.handleGetInfo()
        this.customerInfo = true
      }
      if (val === 'carInfo') {
        this.$refs.CarInfo.handleGetInfo()
        this.$refs.CarInfo.handleGetSelect()
        this.carInfo = true
      }
      if (val === 'driverInfo') {
        this.$refs.DriverInfo.handleGetInfo()
        this.$refs.DriverInfo.handleGetSelect()
        this.driverInfo = true
      }
      if (val == 'handleTable') {
        this.$refs.handlTableAdd.handleGetSelect({ farmCode: this.ruleForm.farmCode, teamCode: this.ruleForm.teamCode })
        this.dialogVisible = true
      }
    },
  },
}
</script>

<style lang='scss' scoped>
.form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.el-form-item {
  width: 33%;
}

::v-deep .widthLabel {
  .el-form-item__label {
    width: 160px !important;
  }
}

.fir-title {
  margin-top: 0 !important;
}


.button-box {
  margin-top: 60px;
}

.inStoragePCButton {
  width: 120px;
  height: 10vh;
  position: relative;
  float: left;
  background: #0e7b67;
  color: #fff;
  font-weight: 700;
  font-size: 1.2vw;
  line-height: 10vh;
  text-align: center;
  margin: 2vh 1vw;
  border-radius: 5px;
  cursor: pointer;
}


::v-deep .el-form-item__content {
  display: flex;
  align-items: center;
  height: 36px;
  line-height: 36px;
}

::v-deep .el-input {
  flex: 1;
  height: 36px;
}

::v-deep .el-select {
  flex: 1;
  height: 36px;
}

::v-deep .el-input__icon {
  line-height: 36px;
}

::v-deep .el-input__inner {
  height: 36px;
}
.dialog-footer333 {
  position: absolute;
  width: 180px;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
}
</style>
